<div class="gh-email-design-color-picker">
    <div class="gh-btn-group" {{on "mouseenter" this.onMouseEnter}} {{on "mouseleave" this.onMouseLeave}}>
        <p>{{this.currentColorObject.name}}</p>
        <label type="button" style={{html-safe this.customColorStyle}} class="gh-btn gh-email-design-color custom {{if this.customColorSelected "gh-btn-group-selected"}}" {{on "click" this.onOpenColorPicker}}>
            <input
                type="color"
                value={{this.colorInputValue}}
                {{on "input" this.updateColorInputValue}}
                {{on "change" this.updateColorInputValue}}
            />
        </label>
        {{#each this.presetColors as |color|}}
            <button type="button" style={{html-safe color.style}} class="gh-btn gh-email-design-color {{color.class}} {{if (eq this.currentColorObject.value color.value) "gh-btn-group-selected"}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
        {{/each}}
    </div>
</div>
